<template>
  <!-- 现在结算 -->
  <div class="content page-order-checkout checkout">
    <div class="js-checkout-address-box">
      <div class="gray-box clear">
        <div class="title columns-title pre-title">
          <h2>收货信息</h2>
        </div> 
        <div class="box-inner js-checkout-address-panel">
          <div class="address-common-table js-multiple-address-panel">
            <ul class="address-item-list clear js-address-item-list">
              <li :class="{'js-choose-address':true,'selected-address-item':item.default}"
              v-for="(item,i) in addressInfo"
              @mouseover="isShowBtm=i"
              @mouseleave="isShowBtm=-1"
              :key="i">
                <div class="address-item">
                  <div class="name-section">{{item.name}}</div>
                  <div class="mobile-section">{{item.phone}}</div>
                  <div class="detail-section">
                    {{item.province}} {{item.city}} {{item.areas}}
                    <br />{{item.add}}
                  </div>
                </div>
                <div class="operation-section"
                :style="{transform:isShowBtm==i?'translate(0,0px)':'translate(0,29px)',visibility: 'visible',transition:'all 0.3s'}">
                  <span class="update-btn js-edit-address" @click="editAddressPop(item)">修改</span>
                  <span class="delete-btn js-delete-address" @click="delAddress({index:i})">删除</span>
                </div>
              </li>
              <li class="add-address-item js-add-address"
              @click="editAddressPop(null)">
                <p>使用新地址</p>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>
    <div class="gray-box">
      <div class="title">
        <h2>发票信息</h2>
      </div>
      <div class="box-inner invoice-box js-invoice-box">
        <p class="invoice-detail">发票类型：电子发票</p>
        <div class="invoice-detail">
          发票抬头：
          <div class="radio-box">
            <label>
              <input type="radio" class="hide" />
              <span class="blue-radio" 
              :class="{'blue-radio-on':!selectBool}"
              @click="selectBool=false">
              <!-- true的话显示 个人的样式 点击是false的时候才能取反 -->
                <a></a>
              </span> 个人
            </label>
            <label>
              <input type="radio" class="hide" />
              <span class="blue-radio" :class="{'blue-radio-on':selectBool}"
              @click="selectBool=true">
                <a></a>
              </span> 单位
            </label>
          </div>
          <div class="module-form-row form-item fn-hide js-invoice-title" 
          v-show="selectBool">
            <div class="module-form-item-wrapper no-icon small-item">
              <!-- <i>请填写公司发票抬头</i> -->
              <input type="text" class="js-verify" placeholder="请填写公司发票抬头"
              v-model="companyMsg"/>
            </div>
          </div>
        </div>
        <p class="invoice-detail">发票内容：购买商品明细</p>
        <p class="invoice-label">电子发票是税务局认可的有效收付款凭证，可作为售后服务凭据。电子发票打印后可以用于企业报销。</p>
      </div>
    </div>

    <!-- 购物清单列表 -->
    <div class="gray-box">
      <div class="title pre-title">
        <h2>购物清单</h2>
      </div>
      <div class="box-inner ui-goods-cart">
        <div class="gray-sub-title cart-table-title">
          <span class="name">商品名称</span>
          <span class="subtotal">小计</span>
          <span class="num">数量</span>
          <span class="price">单价</span>
        </div>
        <div class="cart-table">
          <div class="cart-group js-cart-group">
            <div class="cart-items"
            v-for="(item,i) in selectedCartLists"
            :key="i">
              <div class="items-thumb">
                <a href="javascript:;" target="_blank">
                  <img
                    :src="item.productObj.ali_image"
                  />
                </a>
              </div>
              <div class="name hide-row">
                <div class="name-cell">
                  <a
                    href="javascript:;"
                    :title="item.productObj.title"
                    target="_blank"
                  >{{item.productObj.title}}</a>
                </div>
              </div>
              <div class="subtotal">
                <div class="subtotal-cell">¥ {{item.count*item.productObj.price}}</div>
              </div>
              <div class="goods-num">{{item.count}}</div>
              <div class="price">¥ {{item.productObj.price}}</div>
            </div>
          </div>
        </div>
      </div>
      <div class="box-inner">
        <div class="order-discount-line">
          <p>
            商品总计：
            <span>¥ {{selectedPrice}}</span>
          </p>
          <p>
            运费：
            <span>+ ¥ 0.00</span>
          </p>
          <p class="discount-line js-discount-cash">
            <em>现金券</em>：
            <span>- 0</span>
          </p>
        </div>
      </div>
      <div class="box-inner">
        <div class="last-payment clear">
          <span class="jianguo-blue-main-btn big-main-btn payment-blue-bt fn-right js-checkout"
          @click="goToPayment">
            <a>提交订单</a>
          </span>
          <span class="prices fn-right">
            应付金额：
            <em>¥ {{selectedPrice}}</em>
          </span>
        </div>
      </div>
    </div>
    <!-- 设置弹出修改收货地址的组件 -->
    <address-pop v-show="isShowAddressPop" :isShow.sync="isShowAddressPop" :addData="addData"></address-pop>
  </div>
</template>

<script>
import {mapGetters, mapState, mapMutations } from 'vuex';
import AddressPop from '../AddressPop/AddressPop'
export default {
  components:{
    AddressPop
  },
  data(){
    return {
      //底部修改删除的初始值
      isShowBtm:-1,
      isShowAddressPop:false,  //是否显示修改的框
      addData:{}, //存放修改的地址信息
      selectBool:false,  //个人还是公司的初始变量
      companyMsg:""
    }
  },
  computed:{
    ...mapState(['addressInfo']),
    ...mapGetters(['selectedCartLists','selectedPrice'])
  },
  methods:{
    ...mapMutations(['delAddress']),
    //修改收获地址 item是当前点击的那一项的数据（对象）
    editAddressPop(item){
      console.log(item);
      if(item){
        //将原先的内容添加到输入框
        this.addData={...item};

        console.log("触发啦item啦");
        console.log(this.addData);
      }else{
        // 没有原先的内容 就让它为空
        this.addData=item;

        console.log("触发啦else啦");
        console.log(this.addData);
      }
      this.isShowAddressPop=true;
    },
    //提价订单 跳转到订单页
    goToPayment(){
      //跳转路由
      this.$router.push({name:"payment"});
      //提交公司抬头
      this.$store.commit('commitTicket',{bool:this.selectBool,msg:this.companyMsg})
    }
  }
};
</script>

<style>
</style>